<html>
<body style="margin:0;">
	
<iframe id="myFrame" style="width:100%;height:70vh;border:0;" src="../"></iframe>

<div style="height:20vh;margin:10px;">
	Click on image to edit.
	<br /><br />
	<button onclick="my_update()">Update</button>
	<button onclick="my_save()">Save</button>
	<br /><br />
	
	<img style="max-height:100%" id="testImage" alt="" src="../images/logo.png" onclick="open_image(this)"  />
</div>

<script>
/**
 * will open image on minipaint
 * 
 * @param {string|image} image image or image id
 */
function open_image(image){
	if(typeof image == 'string'){
		image = document.getElementById(image);
	}
	var Layers = document.getElementById('myFrame').contentWindow.Layers;
	var name = image.src.replace(/^.*[\\\/]/, '');
	var new_layer = {
		name: name,
		type: 'image',
		data: image,
		width: image.naturalWidth || image.width,
		height: image.naturalHeight || image.height,
		width_original: image.naturalWidth || image.width,
		height_original: image.naturalHeight || image.height,
	};
	Layers.insert(new_layer);
}

function my_save(){
	var Layers = document.getElementById('myFrame').contentWindow.Layers;
	var tempCanvas = document.createElement("canvas");
	var tempCtx = tempCanvas.getContext("2d");
	var dim = Layers.get_dimensions();
	tempCanvas.width = dim.width;
	tempCanvas.height = dim.height;
	Layers.convert_layers_to_canvas(tempCtx);
	
	if(is_edge_or_ie() == false){
		//update image using blob (faster)
		tempCanvas.toBlob(function (blob) {
			alert('Data length: ' + blob.size);
			console.log(blob);
		}, 'image/png');
	}
	else{
		//slow way for IE, Edge
		var data = tempCanvas.toDataURL();
		console.log(data);
		alert('Data length: ' + data.length);
	}
}

function my_update(){
	var target = document.getElementById('testImage');
	
	var Layers = document.getElementById('myFrame').contentWindow.Layers;
	var tempCanvas = document.createElement("canvas");
	var tempCtx = tempCanvas.getContext("2d");
	var dim = Layers.get_dimensions();
	tempCanvas.width = dim.width;
	tempCanvas.height = dim.height;
	Layers.convert_layers_to_canvas(tempCtx);
	
	target.width = dim.width;
	target.height = dim.height;
	target.src = tempCanvas.toDataURL();
}

/**
 * will auto load image on page load. Uncomment line below to make it work
 */
window.onload = function () {
	//open_image(document.getElementById('testImage'));  //uncomment me
};

//if IE 11 or Edge
function is_edge_or_ie() {
	//ie11
	if( !(window.ActiveXObject) && "ActiveXObject" in window )
		return true;
	//edge
	if( navigator.userAgent.indexOf('Edge/') != -1 )
		return true;
	return false;
}
</script>